<!DOCTYPE html>
<html>
<body>
<canvas id="physicsCanvas" width="600" height="450"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style and Configuration ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineCap = 'butt'; // For sharp line ends

// --- Coordinates ---
const ceilingY = 80;
const rodY = 250;
const leftX = 100;
const rightX = 500;
const rodLengthPixels = rightX - leftX;
const pointE_X = leftX + rodLengthPixels / 4; // Corresponds to AE = 1/4 AB

// 1. Draw Ceiling
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(leftX - 50, ceilingY);
ctx.lineTo(rightX + 50, ceilingY);
ctx.stroke();

// Draw Ceiling Hatching
ctx.lineWidth = 2.5;
for (let i = leftX - 45; i < rightX + 50; i += 12) {
    ctx.beginPath();
    ctx.moveTo(i, ceilingY);
    ctx.lineTo(i - 12, ceilingY - 12);
    ctx.stroke();
}

// 2. Draw Rod AB
// The rod is drawn as a thick line with end caps to mimic the source image style.
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(leftX, rodY);
ctx.lineTo(rightX, rodY);
ctx.stroke();

// End caps for the rod
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(leftX, rodY - 8);
ctx.lineTo(leftX, rodY + 8);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(rightX, rodY - 8);
ctx.lineTo(rightX, rodY + 8);
ctx.stroke();

// 3. Draw Ropes AC and BD
ctx.lineWidth = 4;
// Rope AC
ctx.beginPath();
ctx.moveTo(leftX, ceilingY);
ctx.lineTo(leftX, rodY);
ctx.stroke();
// Rope BD
ctx.beginPath();
ctx.moveTo(rightX, ceilingY);
ctx.lineTo(rightX, rodY);
ctx.stroke();

// 4. Draw Weight P
// Vertical string from E
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(pointE_X, rodY);
ctx.lineTo(pointE_X, rodY + 30);
ctx.stroke();

// Connector piece between string and weight loop
ctx.fillRect(pointE_X - 8, rodY + 30, 16, 6);

// Loop on top of the weight
ctx.beginPath();
ctx.arc(pointE_X, rodY + 30 + 10, 4, 0, 2 * Math.PI);
ctx.fill();

// Weight Block P
const boxSize = 50;
const boxTopY = rodY + 45;
ctx.lineWidth = 5;
ctx.beginPath();
ctx.rect(pointE_X - boxSize / 2, boxTopY, boxSize, boxSize);
ctx.stroke();

// 5. Add Labels
ctx.fillStyle = 'black';
ctx.font = 'bold 32px serif';

// Label C
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('C', leftX + 15, ceilingY + 15);
// Dot below C, as in the original image
ctx.beginPath();
ctx.arc(leftX + 25, ceilingY + 52, 2, 0, 2 * Math.PI);
ctx.fill();

// Label D
ctx.textAlign = 'right';
ctx.fillText('D', rightX - 15, ceilingY + 15);

// Label A
ctx.textAlign = 'right';
ctx.textBaseline = 'top';
ctx.fillText('A', leftX - 10, rodY + 10);

// Label B
ctx.textAlign = 'left';
ctx.fillText('B', rightX + 10, rodY + 10);

// Label E
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillText('E', pointE_X, rodY - 5);

// Label P
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillText('P', pointE_X + boxSize / 2 + 15, boxTopY + boxSize / 2);

</script>
</body>
</html>